<div class="fx-row-vert-cent primary h-xl f-600">
  <span class="mina-icon icon-200 mr-10">margin</span>
  Node Status
</div>
<div class="flex-row h-minus-xl">
  <mina-card label="Bootstrapping"
             color="var(--aware-primary)"
             [value]="'33%'"
             [tooltipText]="'Node is bootstrapping'"
             hint="In progress"></mina-card>
  <div class="flex-grow flex-column ml-8 flex-between tertiary bg-surface pt-8 pb-8 pr-12 pl-12 border-rad-8">
    <div class="fx-row-vert-cent">
      <span class="primary">Reconstructing Mina Short History – 290 Blocks</span>
      <span class="mina-icon icon-200 ml-5 f-20">info</span>
    </div>
    <div class="history-bars flex-row" #barsWrapper>
      <span class="bar"
            [style.width]="barWidth + 'px'"
            [class.done]="i < 39"
            *ngFor="let n of [].constructor(290); let i=index"></span>
    </div>
    <span>Applying Block 96 / 290</span>
  </div>
</div>
